<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<link href="./css/screen.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
</h:head>

	<f:event listener="#{addDepositOrSavingAccount.onLoad}" type="preRenderView"></f:event>

<body>
	<ui:include src="./header.xhtml" />
	<div id="content-outer">
		<div id="content">

			<!--  start page-heading -->
			<div id="page-heading">
				<h1>Search Account</h1>
			</div>
			<!-- end page-heading -->
			<table border="0" width="100%" cellpadding="0" cellspacing="0"
				id="content-table">
				<tr>
					<th rowspan="3" class="sized"><img
						src="images/shared/side_shadowleft.jpg" width="20" height="300"
						alt="" /></th>
					<th class="topleft"></th>
					<td id="tbl-border-top">&nbsp;</td>
					<th class="topright"></th>
					<th rowspan="3" class="sized"><img
						src="images/shared/side_shadowright.jpg" width="20" height="300"
						alt="" /></th>
				</tr>
				<tr>
					<td id="tbl-border-left"></td>
					<td>
						<!--  start content-table-inner ...................................................................... START -->
						<div id="content-table-inner">

							<!--  start table-content  -->
							<div id="table-content">

								<!--  start message-green -->
								<!--  start top-search -->
								<div id="top-search" style="padding-bottom: 40px">
									<h:form>
										<table border="0" cellpadding="0" cellspacing="0">
											<tr>
												<td><h:inputText
														value="#{addDepositOrSavingAccount.searchValue}"
														
														style="width: 150px; height:30px; padding: 0px" /> &nbsp;</td>
												<td><h:selectOneMenu
														value="#{addDepositOrSavingAccount.selectSearchType}" >														
														<f:selectItem itemValue="idCardNumber"
															itemLabel="ID Card Number"></f:selectItem>													
													</h:selectOneMenu></td>
												<td><h:commandButton value="Search" style="height:30px; margin-top: -10px; margin-left: 10px"
														action="#{addDepositOrSavingAccount.search}"
														class="btn" /></td>
											</tr>
										</table>
									</h:form>
								</div>
								<!--  end top-search -->
								<!--  end message-green -->


								<!--  start product-table ..................................................................................... -->
								<h:form id="mainform">
								<ui:fragment rendered="#{addDepositOrSavingAccount.savingAccountListDataModel != null}">
									<table style="margin-top: 30px" border="0" width="100%"
										cellpadding="0" cellspacing="0" id="product-table">

										<tr>
											<th class="table-header-repeat line-left "
												style="text-align: center">No</th>
													<th class="table-header-repeat line-left "
												style="text-align: center">Customer ID</th>
											<th class="table-header-repeat line-left "
												style="text-align: center">Full Name</th>
											<th class="table-header-repeat line-left "
												style="text-align: center">ID Card Number</th>
											<th class="table-header-repeat line-left "
												style="text-align: center">Email</th>
											<th class="table-header-repeat line-left "
												style="text-align: center">Address</th>
											<th class="table-header-repeat line-left "
												style="text-align: center">Phone</th>										
										
										
										</tr>


										<tbody>
											<ui:repeat var="list"
												value="#{addDepositOrSavingAccount.savingAccountListDataModel}"
												varStatus="status">
												<tr>
													<td><h:outputText style="text-align: center"
															value="  #{status.index +1}"></h:outputText></td>
													<td><h:outputText style="text-align: center"
															value="#{list.customerID}" /></td>
												
													<td><h:outputText style="text-align: center"
															value="#{list.lastName}&nbsp;#{list.midName}&nbsp;#{list.firstName}" /></td>
													<td><h:outputText style="text-align: center"
															value="#{list.idCardNumber}" /></td>
													<td><h:outputText style="text-align: center"
															value="#{list.email}" /></td>
													<td><h:outputText style="text-align: center"
															value="&bnsp;#{list.address}">
															<f:convertNumber groupingUsed="true" type="currency"
																minFractionDigits="0" locale="vi_VN" />
														</h:outputText></td>
													<td><h:outputText style="text-align: center"
															value="#{list.phoneNumber}" /></td>
												</tr>
											</ui:repeat>
										</tbody>
										<tbody>
										
										</tbody>
										
									</table>
									<table border="0" cellpadding="0" cellspacing="0"
										style="float: left; margin-left: 810px">
													<tr>
												<td></td>
												<td style="padding-left: 190px">
												<h:commandButton 
														style="height:30px; font-size:14px; padding-top:0px"
														action="#{addDepositOrSavingAccount.addNew}" type="submit"
														value="Add New Account" class="btn btn-success"/>


												</td>

											</tr>
									
</table>
										
</ui:fragment>

									<!--  end product-table................................... -->
								</h:form>
							</div>
							<!--  end content-table  -->

							<!--  start paging..................................................... -->

							<!--  end paging................ -->

							<div class="clear"></div>

						</div> <!--  end content-table-inner ............................................END  -->
					</td>
					<td id="tbl-border-right"></td>
				</tr>
				<tr>
					<th class="sized bottomleft"></th>
					<td id="tbl-border-bottom">&nbsp;</td>
					<th class="sized bottomright"></th>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>
